<template>
  <div
    class="app"
    :class="{ 'transparent-mode': transparentMode }"
    :style="{ backgroundColor: backgroundColor }"
  >
    <!-- 简化的顶部工具栏 -->
    <div class="toolbar" v-show="!transparentMode">
      <div class="toolbar-left">
        <button
          class="btn btn-primary"
          @click="importFile"
          :disabled="isImporting"
        >
          {{ isImporting ? "导入中..." : "导入小说" }}
        </button>

        <div v-if="isImporting" class="import-progress">
          <div class="progress-bar">
            <div
              class="progress-fill"
              :style="{ width: importProgress + '%' }"
            ></div>
          </div>
          <span class="progress-text">{{ Math.round(importProgress) }}%</span>
        </div>
        <div v-else-if="currentFileName" class="file-info">
          <span class="file-name">{{ currentFileName }}</span>
        </div>
      </div>

      <div class="toolbar-right">
        <div class="settings-container">
          <button
            class="btn btn-settings"
            @click="toggleSettingsMenu"
            title="设置"
          >
            ⚙️ 设置
          </button>

          <!-- 设置菜单 -->
          <div v-if="showSettingsMenu" class="settings-menu">
            <div class="menu-section">
              <div class="menu-title">阅读设置</div>

              <!-- 自动滚动 -->
              <div class="menu-item">
                <label class="menu-label">
                  <input
                    type="checkbox"
                    v-model="autoScroll"
                    @change="toggleAutoScroll"
                  />
                  自动滚动
                </label>
              </div>

              <div v-if="autoScroll" class="menu-item indent">
                <label class="menu-label">滚动速度:</label>
                <input
                  type="range"
                  v-model="scrollSpeed"
                  min="10"
                  max="200"
                  step="10"
                  class="speed-slider"
                />
                <span class="speed-value">{{ scrollSpeed }}</span>
              </div>

              <!-- 字体设置 -->
              <div class="menu-item">
                <label class="menu-label">字体大小:</label>
                <input
                  type="range"
                  v-model="fontSize"
                  min="12"
                  max="32"
                  step="2"
                  class="font-slider"
                />
                <span class="font-value">{{ fontSize }}px</span>
              </div>

              <div class="menu-item">
                <label class="menu-label">字体颜色:</label>
                <input type="color" v-model="textColor" class="color-picker" />
              </div>

              <div class="menu-item">
                <label class="menu-label">背景颜色:</label>
                <input
                  type="color"
                  v-model="backgroundColor"
                  class="color-picker"
                />
                <button class="btn btn-small" @click="setTransparent">
                  透明
                </button>
              </div>

              <!-- 窗口尺寸设置 -->
              <div class="menu-item">
                <label class="menu-label">窗口宽度:</label>
                <input
                  type="range"
                  v-model="windowWidth"
                  min="100"
                  max="1600"
                  step="50"
                  class="size-slider"
                />
                <span class="size-value">{{ windowWidth }}px</span>
              </div>

              <div class="menu-item">
                <label class="menu-label">窗口高度:</label>
                <input
                  type="range"
                  v-model="windowHeight"
                  min="100"
                  max="1200"
                  step="50"
                  class="size-slider"
                />
                <span class="size-value">{{ windowHeight }}px</span>
              </div>

              <!-- 章节导航 -->
              <div class="menu-item">
                <label class="menu-label">章节搜索:</label>
                <input
                  type="text"
                  v-model="searchQuery"
                  placeholder="搜索章节..."
                  class="search-input"
                  @input="searchChapters"
                />
              </div>

              <div
                v-if="filteredChapters.length > 0 && searchQuery"
                class="chapter-list"
              >
                <div
                  v-for="chapter in filteredChapters.slice(0, 5)"
                  :key="chapter.originalIndex"
                  class="chapter-item"
                  @click="jumpToChapter(chapter.originalIndex)"
                >
                  {{ formatChapterTitle(chapter.title) }}
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>

    <!-- 主内容区域 -->
    <div class="main-content">
      <!-- 章节列表 -->
      <div
        v-if="chapters.length > 0 && !transparentMode"
        class="chapter-list"
        :class="{ collapsed: chapterPanelCollapsed }"
      >
        <div class="chapter-list-header">
          <button
            class="collapse-btn"
            @click="toggleChapterPanel"
            :title="chapterPanelCollapsed ? '展开章节列表' : '收起章节列表'"
          >
            {{ chapterPanelCollapsed ? "▶" : "◀" }}
          </button>
          <h3 v-if="!chapterPanelCollapsed">
            章节目录 ({{ filteredChapters.length }})
          </h3>
        </div>
        <div v-if="!chapterPanelCollapsed" class="chapter-search">
          <input
            type="text"
            class="input search-input"
            placeholder="搜索章节..."
            v-model="searchQuery"
            @input="searchChapters"
          />
        </div>
        <div v-if="!chapterPanelCollapsed" class="chapter-items">
          <div
            v-for="(chapter, index) in filteredChapters"
            :key="index"
            class="chapter-item"
            :class="{ active: currentChapterIndex === chapter.originalIndex }"
            @click="jumpToChapter(chapter.originalIndex)"
          >
            {{ chapter.title }}
          </div>
        </div>
      </div>

      <!-- 阅读区域 -->
      <div class="reading-area">
        <div v-if="!bookContent" class="welcome">
          <h2>📖 阅读器</h2>
          <p>点击「导入小说」开始阅读</p>
          <p class="tip">💡 右键可打开设置菜单</p>
        </div>

        <div v-else class="book-content" :style="{ fontSize: fontSize + 'px' }">
          <div class="chapter-navigation" v-show="!transparentMode">
            <button
              class="btn"
              @click="previousChapter"
              :disabled="currentChapterIndex <= 0"
            >
              上一章
            </button>
            <span class="chapter-info">
              {{ currentChapterIndex + 1 }} / {{ chapters.length }}
              {{ chapters[currentChapterIndex]?.title || "" }}
            </span>
            <button
              class="btn"
              @click="nextChapter"
              :disabled="currentChapterIndex >= chapters.length - 1"
            >
              下一章
            </button>
          </div>

          <!-- 透明模式下的拖拽区域 -->
          <div
            v-if="transparentMode"
            class="drag-area"
            @mousedown="startDrag"
          ></div>

          <div
            class="text-content"
            ref="textContent"
            :style="{ color: textColor }"
            @contextmenu="showContextMenuHandler"
            @click="hideContextMenu"
          >
            <pre>{{ currentChapterContent }}</pre>
          </div>

          <!-- 右键上下文菜单 -->
          <div
            v-if="showContextMenu"
            class="context-menu"
            :style="{ left: contextMenuX + 'px', top: contextMenuY + 'px' }"
            @click.stop
          >
            <div class="menu-section">
              <div class="menu-title">阅读设置</div>

              <!-- 自动滚动 -->
              <div class="menu-item">
                <label class="menu-label">
                  <input
                    type="checkbox"
                    v-model="autoScroll"
                    @change="toggleAutoScroll"
                  />
                  自动滚动
                </label>
              </div>

              <div v-if="autoScroll" class="menu-item indent">
                <label class="menu-label">滚动速度:</label>
                <input
                  type="range"
                  v-model="scrollSpeed"
                  min="10"
                  max="200"
                  step="10"
                  class="speed-slider"
                />
                <span class="speed-value">{{ scrollSpeed }}</span>
              </div>

              <!-- 字体设置 -->
              <div class="menu-item">
                <label class="menu-label">字体大小:</label>
                <input
                  type="range"
                  v-model="fontSize"
                  min="12"
                  max="32"
                  step="2"
                  class="font-slider"
                />
                <span class="font-value">{{ fontSize }}px</span>
              </div>

              <div class="menu-item">
                <label class="menu-label">字体颜色:</label>
                <input type="color" v-model="textColor" class="color-picker" />
              </div>

              <div class="menu-item">
                <label class="menu-label">背景颜色:</label>
                <input
                  type="color"
                  v-model="backgroundColor"
                  class="color-picker"
                />
                <button class="btn btn-small" @click="setTransparent">
                  透明
                </button>
              </div>

              <!-- 窗口尺寸设置 -->
              <div class="menu-item">
                <label class="menu-label">窗口宽度:</label>
                <input
                  type="range"
                  v-model="windowWidth"
                  min="100"
                  max="1600"
                  step="50"
                  class="size-slider"
                />
                <span class="size-value">{{ windowWidth }}px</span>
              </div>

              <div class="menu-item">
                <label class="menu-label">窗口高度:</label>
                <input
                  type="range"
                  v-model="windowHeight"
                  min="100"
                  max="1200"
                  step="50"
                  class="size-slider"
                />
                <span class="size-value">{{ windowHeight }}px</span>
              </div>

              <!-- 章节导航 -->
              <div class="menu-item">
                <label class="menu-label">章节搜索:</label>
                <input
                  type="text"
                  v-model="searchQuery"
                  placeholder="搜索章节..."
                  class="search-input"
                  @input="searchChapters"
                />
              </div>

              <div
                v-if="filteredChapters.length > 0 && searchQuery"
                class="chapter-list"
              >
                <div
                  v-for="chapter in filteredChapters.slice(0, 5)"
                  :key="chapter.originalIndex"
                  class="chapter-item"
                  @click="jumpToChapter(chapter.originalIndex)"
                >
                  {{ formatChapterTitle(chapter.title) }}
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
const electron = window.require ? window.require("electron") : null;
const ipcRenderer = electron ? electron.ipcRenderer : null;

export default {
  name: "App",
  data() {
    return {
      bookContent: "",
      currentFileName: "",
      chapters: [],
      currentChapterIndex: 0,
      fontSize: 16,
      backgroundColor: "#ffffff",
      searchQuery: "",
      filteredChapters: [],
      isImporting: false,
      importProgress: 0,
      fileEncoding: "",
      fileSize: 0,
      isLargeFile: false,
      // 右键菜单相关
      showContextMenu: false,
      contextMenuX: 0,
      contextMenuY: 0,
      // 设置菜单相关
      showSettingsMenu: false,
      // 自动滚动相关
      autoScroll: false,
      scrollSpeed: 3,
      scrollInterval: null,
      // 字体颜色
      textColor: "#333333",
      // 章节面板收缩状态
      chapterPanelCollapsed: false,
      // 透明模式状态
      transparentMode: false,
      // 窗口尺寸设置
      windowWidth: 1000,
      windowHeight: 700,
    };
  },
  computed: {
    currentChapterContent() {
      if (this.chapters.length === 0) return "";
      return this.chapters[this.currentChapterIndex]?.content || "";
    },
  },
  watch: {
    windowWidth() {
      this.updateWindowSize();
    },
    windowHeight() {
      this.updateWindowSize();
    },
  },
  methods: {
    async importFile() {
      if (!ipcRenderer) {
        alert("此功能需要在 Electron 环境中运行");
        return;
      }

      if (this.isImporting) return;

      this.isImporting = true;
      this.importProgress = 0;

      try {
        // 模拟进度更新
        const updateProgress = (progress) => {
          this.importProgress = progress;
        };

        updateProgress(10);

        const result = await ipcRenderer.invoke("select-txt-file");

        if (result.success) {
          updateProgress(20);

          // 设置文件信息
          this.currentFileName = result.fileName;
          this.fileEncoding = result.encoding || "utf8";
          this.fileSize = result.fileSize || 0;
          this.isLargeFile = this.fileSize > 10 * 1024 * 1024;

          updateProgress(30);

          // 对于大文件，分步处理内容
          if (this.isLargeFile) {
            // 大文件处理提示
            console.log(
              "处理大文件，文件大小:",
              this.formatFileSize(this.fileSize)
            );
            updateProgress(40);
            await new Promise((resolve) => setTimeout(resolve, 100));
          }

          this.bookContent = result.content;
          updateProgress(60);

          // 解析章节
          await this.parseChapters();
          updateProgress(90);

          await new Promise((resolve) => setTimeout(resolve, 200));
          this.currentChapterIndex = 0;

          updateProgress(100);

          // 完成后延迟隐藏进度条
          setTimeout(() => {
            this.isImporting = false;
            this.importProgress = 0;
          }, 500);
        } else {
          this.isImporting = false;
          this.importProgress = 0;
          alert("导入失败: " + result.error);
        }
      } catch (error) {
        this.isImporting = false;
        this.importProgress = 0;
        alert("导入文件时出错: " + error.message);
      }
    },

    async parseChapters() {
      if (!this.bookContent) return;

      // 章节分割正则，匹配常见的章节标题格式
      const chapterRegex =
        /(第[\d一二三四五六七八九十百千万]+[章回节集部]|Chapter\s*\d+|[\d]+\.|序章|楔子|后记|尾声)/gi;

      const lines = this.bookContent.split("\n");
      const chapters = [];
      let currentChapter = { title: "开始", content: "", startLine: 0 };

      const batchSize = 1000; // 每批处理1000行

      for (let i = 0; i < lines.length; i++) {
        const line = lines[i].trim();

        if (chapterRegex.test(line) && line.length < 50) {
          // 保存当前章节
          if (currentChapter.content.trim()) {
            chapters.push({ ...currentChapter });
          }

          // 开始新章节
          currentChapter = {
            title: line,
            content: "",
            startLine: i,
          };
        } else {
          currentChapter.content += line + "\n";
        }

        // 每处理一批行数后让出控制权，避免阻塞UI
        if (i % batchSize === 0 && i > 0) {
          await new Promise((resolve) => setTimeout(resolve, 0));
        }
      }

      // 添加最后一章
      if (currentChapter.content.trim()) {
        chapters.push(currentChapter);
      }

      // 如果没有找到章节，将整本书作为一章
      if (chapters.length === 0) {
        chapters.push({
          title: this.currentFileName || "全文",
          content: this.bookContent,
          startLine: 0,
        });
      }

      this.chapters = chapters;
      this.filteredChapters = chapters.map((chapter, index) => ({
        ...chapter,
        originalIndex: index,
      }));
    },

    jumpToChapter(index) {
      this.currentChapterIndex = index;
      this.$nextTick(() => {
        if (this.$refs.textContent) {
          this.$refs.textContent.scrollTop = 0;
        }
      });
    },

    previousChapter() {
      if (this.currentChapterIndex > 0) {
        this.currentChapterIndex--;
        this.$nextTick(() => {
          if (this.$refs.textContent) {
            this.$refs.textContent.scrollTop = 0;
          }
        });
      }
    },

    nextChapter() {
      if (this.currentChapterIndex < this.chapters.length - 1) {
        this.currentChapterIndex++;
        this.$nextTick(() => {
          if (this.$refs.textContent) {
            this.$refs.textContent.scrollTop = 0;
          }
        });
      }
    },

    setTransparent() {
      this.transparentMode = !this.transparentMode;
      this.backgroundColor = this.transparentMode
        ? "rgba(0,0,0,0.1)"
        : "#ffffff";
      // 通知Electron主进程更新窗口透明度
      if (window.require) {
        const { ipcRenderer } = window.require("electron");
        ipcRenderer.send("set-window-transparent", this.transparentMode);
      }
    },

    updateWindowSize() {
      if (window.require) {
        const { ipcRenderer } = window.require("electron");
        ipcRenderer.send("resize-window", this.windowWidth, this.windowHeight);
      }
    },

    startDrag(event) {
      if (window.require) {
        const { ipcRenderer } = window.require("electron");
        ipcRenderer.send("start-drag");
      }
    },

    searchChapters() {
      if (!this.searchQuery.trim()) {
        this.filteredChapters = this.chapters.map((chapter, index) => ({
          ...chapter,
          originalIndex: index,
        }));
        return;
      }

      const query = this.searchQuery.toLowerCase();
      this.filteredChapters = this.chapters
        .map((chapter, index) => ({ ...chapter, originalIndex: index }))
        .filter((chapter) => chapter.title.toLowerCase().includes(query));
    },

    formatFileSize(bytes) {
      if (bytes === 0) return "0 B";
      const k = 1024;
      const sizes = ["B", "KB", "MB", "GB"];
      const i = Math.floor(Math.log(bytes) / Math.log(k));
      return parseFloat((bytes / Math.pow(k, i)).toFixed(2)) + " " + sizes[i];
    },

    // 右键菜单相关方法
    showContextMenuHandler(event) {
      event.preventDefault();
      this.contextMenuX = event.clientX;
      this.contextMenuY = event.clientY;
      this.showContextMenu = true;
    },

    hideContextMenu() {
      this.showContextMenu = false;
    },

    // 设置菜单相关方法
    toggleSettingsMenu() {
      this.showSettingsMenu = !this.showSettingsMenu;
    },

    hideSettingsMenu() {
      this.showSettingsMenu = false;
    },

    // 自动滚动功能
    toggleAutoScroll() {
      if (this.autoScroll) {
        this.startAutoScroll();
      } else {
        this.stopAutoScroll();
      }
    },

    startAutoScroll() {
      this.stopAutoScroll(); // 先停止之前的滚动
      this.scrollInterval = setInterval(() => {
        if (this.$refs.textContent) {
          const element = this.$refs.textContent;
          const scrollStep = this.scrollSpeed / 10;
          element.scrollTop += scrollStep;

          // 如果滚动到底部，自动跳转到下一章
          if (
            element.scrollTop + element.clientHeight >=
            element.scrollHeight - 10
          ) {
            if (this.currentChapterIndex < this.chapters.length - 1) {
              this.nextChapter();
            } else {
              this.stopAutoScroll();
              this.autoScroll = false;
            }
          }
        }
      }, 100);
    },

    stopAutoScroll() {
      if (this.scrollInterval) {
        clearInterval(this.scrollInterval);
        this.scrollInterval = null;
      }
    },

    // 全局事件处理
    handleGlobalClick(event) {
      // 如果点击的不是右键菜单内部，则关闭菜单
      if (this.showContextMenu && !event.target.closest(".context-menu")) {
        this.hideContextMenu();
      }
      // 如果点击的不是设置菜单内部，则关闭设置菜单
      if (
        this.showSettingsMenu &&
        !event.target.closest(".settings-menu") &&
        !event.target.closest(".btn-settings")
      ) {
        this.hideSettingsMenu();
      }
    },

    handleGlobalRightClick(event) {
      // 如果右键点击的不是内容区域，阻止默认菜单但不显示自定义菜单
      if (!event.target.closest(".text-content")) {
        event.preventDefault();
        this.hideContextMenu();
      }
    },

    // 切换章节面板收缩状态
    toggleChapterPanel() {
      this.chapterPanelCollapsed = !this.chapterPanelCollapsed;
    },
  },

  watch: {
    // 监听滚动速度变化，实时更新自动滚动
    scrollSpeed() {
      if (this.autoScroll) {
        this.startAutoScroll();
      }
    },

    // 监听字体大小变化，应用到文本内容
    fontSize() {
      if (this.$refs.textContent) {
        this.$refs.textContent.style.fontSize = this.fontSize + "px";
      }
    },
  },

  mounted() {
    // 添加全局点击事件监听，用于关闭右键菜单
    document.addEventListener("click", this.handleGlobalClick);
    document.addEventListener("contextmenu", this.handleGlobalRightClick);
  },

  beforeUnmount() {
    // 组件销毁前清理自动滚动和事件监听
    this.stopAutoScroll();
    document.removeEventListener("click", this.handleGlobalClick);
    document.removeEventListener("contextmenu", this.handleGlobalRightClick);
  },
};
</script>

<style scoped>
.app {
  width: 100%;
  height: 100vh;
  display: flex;
  flex-direction: column;
  transition: background-color 0.3s ease;
}

.toolbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 12px 16px;
  background: rgba(255, 255, 255, 0.9);
  backdrop-filter: blur(10px);
  border-bottom: 1px solid rgba(0, 0, 0, 0.1);
  flex-shrink: 0;
  -webkit-app-region: drag; /* 允许拖拽 */
}

.toolbar-left {
  display: flex;
  align-items: center;
  gap: 12px;
  -webkit-app-region: no-drag; /* 按钮区域不拖拽 */
}

.toolbar-center {
  flex: 1;
  display: flex;
  justify-content: center;
  max-width: 300px;
  margin: 0 20px;
  -webkit-app-region: no-drag; /* 搜索框区域不拖拽 */
}

.toolbar-right {
  display: flex;
  align-items: center;
  gap: 16px;
  -webkit-app-region: no-drag; /* 设置区域不拖拽 */
}

.file-info {
  margin-left: 10px;
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.file-name {
  color: #333;
  font-size: 14px;
  font-weight: 500;
  max-width: 200px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.file-details {
  display: flex;
  gap: 10px;
  font-size: 12px;
  color: #666;
}

.encoding {
  background: #e3f2fd;
  padding: 2px 6px;
  border-radius: 3px;
  color: #1976d2;
}

.file-size {
  background: #f3e5f5;
  padding: 2px 6px;
  border-radius: 3px;
  color: #7b1fa2;
}

.large-file-warning {
  background: #fff3e0;
  padding: 2px 6px;
  border-radius: 3px;
  color: #f57c00;
  font-weight: 500;
}

.progress-container {
  display: flex;
  align-items: center;
  gap: 8px;
}

.progress-bar {
  width: 120px;
  height: 6px;
  background: rgba(0, 0, 0, 0.1);
  border-radius: 3px;
  overflow: hidden;
}

.progress-fill {
  height: 100%;
  background: linear-gradient(90deg, #409eff, #67c23a);
  border-radius: 3px;
  transition: width 0.3s ease;
}

.progress-text {
  font-size: 12px;
  color: #666;
  min-width: 35px;
}

.btn:disabled {
  opacity: 0.6;
  cursor: not-allowed;
  transform: none;
}

.btn:disabled:hover {
  background: rgba(255, 255, 255, 0.8);
  transform: none;
}

/* 设置菜单样式 */
.settings-container {
  position: relative;
}

.settings-menu {
  position: absolute;
  top: 100%;
  right: 0;
  margin-top: 100px;
  background: white;
  border: 1px solid #ddd;
  border-radius: 8px;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
  z-index: 1000;
  min-width: 280px;
  max-width: 350px;
  padding: 8px 0;
  font-size: 14px;
}

.settings-menu .menu-section {
  padding: 0 12px;
}

.settings-menu .menu-title {
  font-weight: bold;
  color: #333;
  padding: 8px 0;
  border-bottom: 1px solid #eee;
  margin-bottom: 8px;
  text-align: center;
}

.settings-menu .menu-item {
  display: flex;
  align-items: center;
  padding: 6px 0;
  gap: 8px;
}

.settings-menu .menu-item.indent {
  padding-left: 20px;
}

.settings-menu .menu-label {
  display: flex;
  align-items: center;
  gap: 6px;
  min-width: 80px;
  font-size: 13px;
  color: #555;
}

.settings-menu .speed-slider,
.settings-menu .font-slider {
  flex: 1;
  margin: 0 8px;
}

.settings-menu .speed-value,
.settings-menu .font-value {
  min-width: 40px;
  text-align: right;
  font-size: 12px;
  color: #666;
}

.settings-menu .color-picker {
  width: 40px;
  height: 25px;
  border: none;
  border-radius: 4px;
  cursor: pointer;
}

.settings-menu .search-input {
  flex: 1;
  padding: 4px 8px;
  border: 1px solid #ddd;
  border-radius: 4px;
  font-size: 12px;
}

.settings-menu .chapter-list {
  max-height: 120px;
  overflow-y: auto;
  margin-top: 4px;
  border: 1px solid #eee;
  border-radius: 4px;
}

.settings-menu .chapter-item {
  padding: 6px 8px;
  cursor: pointer;
  font-size: 12px;
  border-bottom: 1px solid #f5f5f5;
}

.settings-menu .chapter-item:hover {
  background: #f0f8ff;
}

.settings-menu .chapter-item:last-child {
  border-bottom: none;
}

.settings-menu .size-slider {
  width: 100px;
  margin: 0 8px;
}

.settings-menu .size-value {
  font-size: 12px;
  color: #666;
  min-width: 50px;
  display: inline-block;
}

/* 滚动条样式 */
.settings-menu .chapter-list::-webkit-scrollbar {
  width: 4px;
}

.settings-menu .chapter-list::-webkit-scrollbar-track {
  background: #f1f1f1;
}

.settings-menu .chapter-list::-webkit-scrollbar-thumb {
  background: #c1c1c1;
  border-radius: 2px;
}

/* 右键上下文菜单样式 */
.context-menu {
  position: fixed;
  background: white;
  border: 1px solid #ddd;
  border-radius: 8px;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
  z-index: 1000;
  min-width: 280px;
  max-width: 350px;
  padding: 8px 0;
  font-size: 14px;
}

.menu-section {
  padding: 0 12px;
}

.menu-title {
  font-weight: bold;
  color: #333;
  padding: 8px 0;
  border-bottom: 1px solid #eee;
  margin-bottom: 8px;
  text-align: center;
}

.menu-item {
  display: flex;
  align-items: center;
  padding: 6px 0;
  gap: 8px;
}

.menu-item.indent {
  padding-left: 20px;
}

.menu-label {
  display: flex;
  align-items: center;
  gap: 6px;
  min-width: 80px;
  font-size: 13px;
  color: #555;
}

.speed-slider,
.font-slider {
  flex: 1;
  margin: 0 8px;
}

.speed-value,
.font-value {
  min-width: 40px;
  text-align: right;
  font-size: 12px;
  color: #666;
}

.context-menu .color-picker {
  width: 40px;
  height: 25px;
  border: none;
  border-radius: 4px;
  cursor: pointer;
}

.context-menu .search-input {
  flex: 1;
  padding: 4px 8px;
  border: 1px solid #ddd;
  border-radius: 4px;
  font-size: 12px;
}

.context-menu .chapter-list {
  max-height: 120px;
  overflow-y: auto;
  margin-top: 4px;
  border: 1px solid #eee;
  border-radius: 4px;
}

.context-menu .chapter-item {
  padding: 6px 8px;
  cursor: pointer;
  font-size: 12px;
  border-bottom: 1px solid #f5f5f5;
}

.context-menu .chapter-item:hover {
  background: #f0f8ff;
}

.context-menu .chapter-item:last-child {
  border-bottom: none;
}

/* 滚动条样式 */
.context-menu .chapter-list::-webkit-scrollbar {
  width: 4px;
}

.context-menu .chapter-list::-webkit-scrollbar-track {
  background: #f1f1f1;
}

.context-menu .chapter-list::-webkit-scrollbar-thumb {
  background: #c1c1c1;
  border-radius: 2px;
}

.search-input {
  width: 100%;
}

.setting-group {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 12px;
}

.font-slider {
  width: 80px;
}

.color-picker {
  width: 30px;
  height: 30px;
  border: none;
  border-radius: 4px;
  cursor: pointer;
}

.btn-small {
  padding: 4px 8px;
  font-size: 12px;
  margin-left: 8px;
  background: #f5f5f5;
  border: 1px solid #ddd;
  border-radius: 3px;
  cursor: pointer;
  transition: all 0.2s ease;
}

.btn-small:hover {
  background: #e9e9e9;
  border-color: #ccc;
}

.main-content {
  display: flex;
  flex: 1;
  overflow: hidden;
}

.chapter-list {
  width: 300px;
  background: rgba(255, 255, 255, 0.95);
  backdrop-filter: blur(10px);
  border-right: 1px solid rgba(0, 0, 0, 0.1);
  display: flex;
  flex-direction: column;
  overflow: hidden;
  transition: width 0.3s ease;
}

.chapter-list.collapsed {
  width: 40px;
}

.collapse-btn {
  background: none;
  border: none;
  font-size: 16px;
  cursor: pointer;
  padding: 8px;
  color: #666;
  transition: color 0.2s ease;
  min-width: 32px;
  display: flex;
  align-items: center;
  justify-content: center;
}

.collapse-btn:hover {
  color: #333;
  background: rgba(0, 0, 0, 0.05);
  border-radius: 4px;
}

.chapter-search {
  padding: 8px 12px;
  border-bottom: 1px solid rgba(0, 0, 0, 0.1);
}

.chapter-list-header {
  padding: 16px;
  border-bottom: 1px solid rgba(0, 0, 0, 0.1);
}

.chapter-list-header h3 {
  font-size: 14px;
  color: #333;
}

.chapter-items {
  flex: 1;
  overflow-y: auto;
}

.chapter-item {
  padding: 12px 16px;
  cursor: pointer;
  border-bottom: 1px solid rgba(0, 0, 0, 0.05);
  font-size: 13px;
  line-height: 1.4;
  transition: all 0.2s ease;
}

.chapter-item:hover {
  background: rgba(64, 158, 255, 0.1);
}

.chapter-item.active {
  background: rgba(64, 158, 255, 0.2);
  color: #409eff;
  font-weight: 500;
}

.reading-area {
  flex: 1;
  display: flex;
  flex-direction: column;
  overflow: hidden;
}

.welcome {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  color: #666;
}

.welcome h2 {
  margin-bottom: 16px;
  color: #333;
}

.welcome .tip {
  margin-top: 12px;
  font-size: 14px;
  color: #999;
}

.book-content {
  flex: 1;
  display: flex;
  flex-direction: column;
  overflow: hidden;
}

.chapter-navigation {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 16px 20px;
  background: rgba(255, 255, 255, 0.9);
  backdrop-filter: blur(10px);
  border-bottom: 1px solid rgba(0, 0, 0, 0.1);
}

.chapter-info {
  font-size: 14px;
  color: #666;
  text-align: center;
  flex: 1;
  margin: 0 20px;
}

.text-content {
  flex: 1;
  overflow-y: auto;
  padding: 20px;
  line-height: 1.8;
}

/* 透明模式样式 */
.app.transparent-mode {
  position: fixed;
  top: 0;
  left: 0;
  width: 100vw;
  height: 100vh;
  z-index: 9999;
  background: transparent !important;
}

.app.transparent-mode .main-content {
  width: 100%;
  height: 100%;
  background: transparent !important;
}

.app.transparent-mode .text-content {
  width: 100%;
  height: 100%;
  padding: 40px;
  box-sizing: border-box;
  background: transparent !important;
}

.text-content pre {
  white-space: pre-wrap;
  word-wrap: break-word;
  font-family: inherit;
  margin: 0;
  color: inherit;
}

/* 拖拽区域样式 */
.drag-area {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  height: 30px;
  background: rgba(0, 0, 0, 0.1);
  cursor: move;
  z-index: 10000;
  -webkit-app-region: drag;
}

/* 尺寸滑块样式 */
.size-slider {
  width: 100px;
  margin: 0 8px;
}

.size-value {
  font-size: 12px;
  color: #666;
  min-width: 50px;
  display: inline-block;
}
</style>
